#roomManagement{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position:absolute;
}
#topbar{
    
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    position:absolute;
    
}
#logo{
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    
    background-image: url("logo.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    padding: 0px;
}
#timeText{
    text-align: center;
    
    height: 20%;
    margin-bottom: 0;
    position: absolute;
    top: 12%;
    font-family: Trebuchet MS;
    font-size: 24px;
    /* margin-top: 4%; */
    color: rgb(70 183 248);
}
#logo{
  background-color:wheat;
  width:20%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}
#welcome{
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 20%;
    background-color: #a5f4ff1f;
  
}
#logotxt{
    text-align: center;
    font-size: 28px;
    font-family: Trebuchet MS;
    text-shadow: 2px 2px 5px rgb(70 183 248);
    margin-top: 4%;
    margin-bottom: 3%;
    letter-spacing: 70px;
}
#welcomeTo{
    margin: 0;
    text-align: center;
    font-size: 20px;
    font-family: Trebuchet MS;
    text-shadow: 2px 2px 5px rgb(70 183 248);
    word-spacing: 39px;
}
#account{
  position:absolute;
  top:0;
  right:0;
  
  width:20%;
  height:100%;
  background-color: #a5f4ff1f;
}
#time{
    position: absolute;
    width: 10%;
    height: 100%;
    top: 0;
    left: 70%;
    padding: 0;
    /* border: 1px solid black; */
    background-color: #a5f4ff1f;
  
}
#mainbar{
    background-color:white;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 120px);
    position:absolute;
    border-top: 1px solid #00000047;
}
.optionbar-container{
  
    left: 0;
    top: 0;
    width: 140px;
    height: 100%;
    position:absolute;
}
.functionbar-container{
    
    right: 0;
    top: 0;
    width: calc(100vw - 140px);
    height: 100%;
    position: absolute;
}
#optionbar{
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    display: flex;
    flex-direction: column;
}
#room{
    flex-grow: 1;
}
#customer{
    flex-grow: 1;
}
#functionbar{
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    overflow-x: hidden;
}
#room-frame{
    
    left: 2%;
    top: 5%;
    width: 96%;
    height: 90%;
    position: absolute;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
    grid-template-rows: auto auto auto;
    background-color: rgb(0,0,0,0.24);
}
#customer-frame{
    
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    
}
#customers {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    left: 0;
    top: 0;
    width: 100%;

    position: absolute;

  }
  
  #customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }
  
  #customers tr:nth-child(even){background-color: #f2f2f2;}
  
  #customers tr:hover {background-color: #ddd;}
  
  #customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
    text-align: center;
  }
button[value="available"]{
    background-color: rgb(127 234 132);
    color: white;
    border: 1px solid black;
}
button[value="occupied"]{
    background-color: rgb(70, 183, 248);
    color: white;
    border: 1px solid black;
}
button[value="maintained"]{
    background-color: rgb(245, 70, 108);
    color: white;
    border: 1px solid black;
}
button[value="available"]:hover{
    background-color: rgb(127 214 132);
    color: black;
    border: 1px solid black;
    box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
    transform: translateY(-0.25em);
}
button[value="occupied"]:hover{
    background-color: rgb(70 183 228);
    color: black;
    border: 1px solid black;
    box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
    transform: translateY(-0.25em);
}
button[value="maintained"]:hover{
    background-color: rgb(225 70 108);
    color: black;
    border: 1px solid black;
    box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
    transform: translateY(-0.25em);
}
button[value="available"].clicked{
    background-color: rgb(127 214 132);
    color: black;
    border: 1px solid black;
    box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
    transform: translateY(-0.25em);
}
button[value="occupied"].clicked{
    background-color: rgb(70 183 228);
    color: black;
    border: 1px solid black;
    box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
    transform: translateY(-0.25em);
}
button[value="maintained"].clicked{
    background-color: rgb(225 70 108);
    color: black;
    border: 1px solid black;
    box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
    transform: translateY(-0.25em);
}

#askForEmptyRoom{
    background-color: white;
    left: 35.5%;
    top: 25%;
    width: 40%;
    height: 50%;
    position: absolute;
    z-index: 9999;
    display: none;
    border: 1.5px solid black;
    border-radius: 5px;
}
#askForOccupiedRoom{
    background-color:white;
    left: 35.5%;
    top: 25%;
    width: 40%;
    height: 50%;
    position: absolute;
    display: none;
    z-index: 9999;
    border: 1.5px solid black;
    border-radius: 5px;
}
#checkin{
    background-color:white;
    left: 35.5%;
    top: 25%;
    width: 40%;
    height: 50%;
    position: absolute;
    display: none;
    z-index: 9999;
    border: 1.5px solid black;
    border-radius: 5px;
}
#checkout{
    background-color:white;
    left: 35.5%;
    top: 25%;
    width: 40%;
    height: 50%;
    position: absolute;
    display: none;
    z-index: 9999;
    border: 1.5px solid black;
    border-radius: 5px;
}
#changeRoom{
    background-color:white;
    left: 35.5%;
    top: 25%;
    width: 40%;
    height: 50%;
    position: absolute;
    display: none;
    z-index: 9999;
    border: 1.5px solid black;
    border-radius: 5px;
}
#bg{
    margin: 0px;
    padding: 0px;
     background-color: #000;
     width: 100%;
     height: 100%;
     top: 0;
     position: fixed;
     opacity: 0.3;
     -webkit-opacity: 0.3;
     -moz-opacity: 0.3;
    display: none;
     
}
/* 登记框标题 */

/* 登陆表单 */

.tips{
    text-align: center;
    font-size:20px;
    height:20%;
    margin-bottom:0;
    cursor: move;
}
.closeBtn {
    background-color: white; 
    color: black; 
    border: 1px solid white;
    width: 8.8%;
    height: 16.3%;
    top:0;
    right:0;
    font-size: larger;
    position: absolute;
    border-radius: 5px;
}

.closeBtn:hover {
    background-color: #f44336;
    color: white;
}
.register-form{
    
    margin-left:2.5%;
    height:40%;
}
.register-input{
     
    margin-bottom:1.5%;
     height:40%;


}
.register-input label{
    float:left;
    font-size:13px;
    text-align:right;
    padding-left:4%;
    height:75%;
    
    width:13.5%;
    margin-top:1.1%;
}
.register-input input.list-input{
    text-indent: 5px;
    width:60%;
    height:75%;
    

}
/* 登陆框登陆按钮 */
.registerSubmit{
    height:20%;
    width:20%;
    margin-left:40%;
    text-align:center;
    margin-top:1%;
}
.option1{
    width: 35%;
    height: 20%;
    position: absolute;
    left: 10%;
    bottom: 35%;
}
.option2{
    width: 35%;
    height: 20%;
    position: absolute;
    right: 10%;
    bottom: 35%;
}

img{
    width: 25%;
    height: 53.3%;
    margin-top: 11%;
    margin-left: 11%;
    position: absolute;
    right: 12%;
}
input[type="button"]{
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    
    font-family: Trebuchet MS;
    color: black;
    background-color:#f2f2f270;
    border: 1px solid #00000047;
    font-size: 17px;
}
input[type="button"]:hover {
    background-color: #ddd;
    color: black;
}